<template>
  <!-- 右则边栏 文章推荐 开始 -->
  <div v-if="recommendArticleList!==null" class="aside" style="background-color: #FFFFFF;">
    <el-divider>文章推荐</el-divider>
    <div class="aside-content-box">
      <ol>
        <li v-for="item in recommendArticleList" :key="item.id">
          <a :href="'/article/'+item.id"><p>{{ item.title }}</p></a>
        </li>
      </ol>
    </div>
  </div>
  <!-- /右则边栏 文章推荐 结束 -->
</template>
<script>
export default {
  name: "recommend",
  props: ["recommendArticleList"]
}
</script>

<style scoped lang="less">

/* 修改则边栏标题横线颜色 */
.el-divider {
  background-color: #2b2b2b;
}

.aside {
  float: left;
  margin-bottom: 20px;
  border-radius: 4px;
}

li:hover {
  color: #8205c6;
  cursor: pointer;
  text-decoration: underline;
}

ol {
  overflow: hidden;
  white-space: nowrap;
  padding: 0 40px 20px;
  line-height: 25px;
  margin-right: 25px;
  text-overflow: ellipsis;
  font-size: 16px;
}

a {
  font-size: 16px;
}

</style>
